<!--<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .layui-card-body {height:60px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:12px}
</style>-->
<div class="layuimini-container layuimini-page-anim">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md12">
            <div id="echarts-dataset" style="background-color:#ffffff;height:500px;padding: 100px"></div>
        </div>
    </div>
</div>
</div>
<script>
    layui.use(['layer','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
        /**
         * 报表功能
         */

        $.ajax({
            url:"repair/queryTongji",
            type:"POST",
            dataType:'json',
            success:function(data){
                console.log(data);
                var str="";
                for(var p in data){
                    str=str+data[p].name+",";
                }

                var str2="";
                for(var p in data){
                    str2=str2+data[p].counts+",";
                }
                str=str.substring(0,str.length-1);
                var strResult=str.split(",");
                str2=str2.substring(0,str2.length-1);
                var strResult2=str2.split(",");
                debugger

                var myChart = echarts.init(document.getElementById('echarts-dataset'), 'walden');
                var app = {};
                option = null;
                let yMax = 50;
                let dataShadow = [];
                for (let i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }
                option = {
                    title: {
                        text: '报修项目统计分析',
                        subtext: ''


                    },
                    grid:{
                        top:"10%",
                        left:"20%",
                        right:"20%",
                    },
                    xAxis: {

                        data: strResult,
                        name: "报修项目",
                        nameTextStyle:{color: "rgba(42, 156, 164, 1)",fontsize :24},

                        splitLine: {
                            show: false

                        },
                        axisLabel: {
                            inside: true,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        name: "项目报修次数",
                        nameTextStyle:{color: "rgba(42, 156, 164, 1)",fontsize :24},
                        splitLine: {
                            show: false

                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#999'
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            showBackground: true,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#83bff6' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#188df0' }
                                ])
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#2378f7' },
                                        { offset: 0.7, color: '#2378f7' },
                                        { offset: 1, color: '#83bff6' }
                                    ])
                                }
                            },
                            data: strResult2
                        }
                    ]
                };
                const zoomSize = 6;
                myChart.on('click', function (params) {
                    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    myChart.dispatchAction({
                        type: 'dataZoom',
                        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue:
                            dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                    });
                });
                option && myChart.setOption(option);
            }
        });
    });
</script>
